﻿<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.findRow.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.moveRow.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false">
    <table id="dg1"></table>
</div>

<script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '主键ID', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [
                {
                    iconCls: 'icon-edit',
                    text: "将地区为“宁波”的数据行移动到地区为“江西”的数据行的下方",
                    handler: function () {
                        var t = $("#dg1");
                        var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "宁波"; });
                        var rowSourceIndex = t.datagrid("getRowIndex", rowSource);
                        var rowTarget = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "江西"; });
                        var rowTargetIndex = t.datagrid("getRowIndex", rowTarget);

                        t.datagrid("moveRow", { target: rowTargetIndex, source: rowSourceIndex, point: "bottom" });
                    }
                },
                "-",
                {
                    iconCls: 'icon-edit',
                    text: "将地区为“西藏”的数据行移动到地区为“宁波”的数据行的上方",
                    handler: function () {
                        var t = $("#dg1");
                        var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "西藏"; });
                        var rowSourceIndex = t.datagrid("getRowIndex", rowSource);
                        var rowTarget = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "宁波"; });
                        var rowTargetIndex = t.datagrid("getRowIndex", rowTarget);

                        t.datagrid("moveRow", { target: rowTargetIndex, source: rowSourceIndex, point: "top" });
                    }
                },
                "-",
                {
                    iconCls: 'icon-edit',
                    text: "将地区为“南京”的数据行移动到地区为“西藏”的数据行的下方",
                    handler: function () {
                        var t = $("#dg1");
                        var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "南京"; });
                        var rowSourceIndex = t.datagrid("getRowIndex", rowSource);
                        var rowTarget = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "西藏"; });
                        var rowTargetIndex = t.datagrid("getRowIndex", rowTarget);

                        t.datagrid("moveRow", { target: rowTargetIndex, source: rowSourceIndex, point: "bottom" });
                    }
                },
                "-",
                {
                    iconCls: 'icon-edit',
                    text: "将地区为“西藏”的数据行往上移动一行",
                    handler: function () {
                        var t = $("#dg1");
                        var rowSource = t.datagrid("findRow", function (itemRow, itemIndex) { return itemRow.AreaName == "西藏"; });
                        var rowSourceIndex = t.datagrid("getRowIndex", rowSource);

                        t.datagrid("shiftRow", { index: rowSourceIndex, type: "up" });
                    }
                }
            ],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-common-data.json",
            rowStyler: function (index, row) {
                var val = row.AreaName;
                if (val == "宁波") { return "background-color:red;"; }
                else if (val == "江西") { return "background-color:pink;"; }
                else if (val == "西藏") { return "background-color:green;"; }
                else if (val == "南京") { return "background-color:#ccc;"; }
            },
            onBeforeMoveRow: function (target, source, point) {

            },
            onMoveRow: function (target, source, point) {
                $.messager.alert("移动完成", " 源数据行[" + source.AreaName + "]移动至目标数据行[" + target.AreaName + "]的" + (point == "top" ? "上方" : "下方") + "，操作完成。 ");
            }
        };

        $("#dg1").datagrid(options);
    });
</script>